<template>
  <div class="app-container">
    <el-dialog v-dialogDrag :visible.sync="dialogVisible" title="BOM配置" width="800px" :close-on-click-modal="false">
      <button-group ref="buttonGroup" @cancel="dialogVisible = false" />
      <div class="formTopFont">BOM配置</div>
      <el-row>
        <el-table :data="tableData" border stripe height="450px" v-loading="loading" row-key="id" :default-expand-all="true" :tree-props="{ children: 'children', hasChildren: false }">
          <el-table-column label="物料名称" prop="materialName" width="150px" show-overflow-tooltip></el-table-column>
          <el-table-column label="物料编码" prop="materialCode"></el-table-column>
          <el-table-column label="工序" prop="procedureNameStr"></el-table-column>
          <el-table-column label="单位" prop="unit"></el-table-column>
          <el-table-column label="组成数量" prop="numbers"></el-table-column>
          <el-table-column label="操作" width="140px" align="center">
            <template #default="{ row, $index }">
              <el-popover :ref="'popver' + $index" placement="right" width="320" trigger="click" @show="getMaterial(row.id)" title="添加">
                <el-form :ref="'ruleForm' + $index" :model="row" :rules="rules" label-width="80px">
                  <el-form-item label="上级物料">
                    <el-input :value="row.materialName" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="物料" prop="CmaterialId">
                    <el-select style="width: 100%" v-model="row.CmaterialId" filterable>
                      <el-option v-for="item in materialList" :key="item.id" :value="item.id" :label="item.materialName"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="工序" prop="CprocedureId">
                    <el-select style="width: 100%" v-model="row.CprocedureId" filterable>
                      <el-option v-for="item in procedureAll" :key="item.id" :value="item.id" :label="`${item.procedureName} ${item.factoryName ? '【' + item.factoryName + '】' : ''}`"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="组成数量" prop="Cnumbers">
                    <el-input-number style="width: 100%" :precision="0" :min="1" v-model="row.Cnumbers"></el-input-number>
                  </el-form-item>
                  <el-row style="text-align: right">
                    <el-button type="primary" @click="submitForm(row, 'ruleForm' + $index, 'popver' + $index)">提交</el-button>
                  </el-row>
                </el-form>
                <el-button slot="reference" type="text" @click="row.Cnumbers = 1">添加</el-button>
              </el-popover>
              <el-button type="text" v-if="row.parentMaterialId !== '0' && !row.children" @click="deleteRow(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    procedureAll: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      title: '',
      rules: {
        CmaterialId: [
          { required: true, message: '请选择物料', trigger: 'change' }
        ],
        Cnumbers: [{ required: true, message: '请输入组成数量' }]
      },
      dialogVisible: false,
      materialList: [],
      tableData: [],
      loading: false,
      oneTableInfo: {}
    }
  },
  watch: {},
  mounted() {},
  methods: {
    /**
     * @description:  open dialog
     * @param {*} row
     * @return {*}
     */
    showDialog(row) {
      this.dialogVisible = true
      this.getTable(row.id)
      this.oneTableInfo = Object.assign({}, row)
    },
    /**
     * @description:  获取表格
     * @param {*} id
     * @return {*}
     */
    async getTable(id) {
      this.loading = true
      const res = await this.$axios.get(`/pro/bom/getStructure?id=${id}`)
      if (res?.data.code === 200) {
        this.tableData = res.data.data
        this.loading = false
      }
    },
    /**
     * @description:  获取物料
     * @param {*} id
     * @return {*}
     */
    async getMaterial(id) {
      const res = await this.$axios.get(
        `/pro/bom/getMaterialExistParent?id=${id}`
      )
      this.materialList = res.data.data
    },
    /**
     * @description: 保存配置
     * @param {*} row
     * @return {*}
     */
    submitForm(row, formName, popver) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { CmaterialId, Cnumbers, materialId, id, CprocedureId } = row
          const params = {
            parentMaterialId: materialId,
            materialId: CmaterialId,
            numbers: Cnumbers,
            parentId: id,
            bomId: this.oneTableInfo.id,
            procedureId: CprocedureId
          }
          const res = await this.$axios.put('/pro/bom/saveStructure', params)
          if (res?.data.code === 200) {
            this.getTable(this.oneTableInfo.id)
            this.$refs[popver].doClose()
            this.$notify.success('添加成功！')
          }
          console.log(params)
        }
      })
    },
    /**
     * @description: 删除当前行bom配置
     * @param {*} row
     * @return {*}
     */
    async deleteRow(row) {
      const res = await this.$axios.delete(`/pro/bom/delStructure?id=${row.id}`)
      if (res?.data.code === 200) {
        this.getTable(this.oneTableInfo.id)
        this.$notify.success('删除成功！')
      }
    }
  }
}
</script>
<style lang='scss' scoped>
</style>